<template>
  <el-table
      :data="props.parentData.workReportList"
      :row-class-name="tableRowClassName"
      style="width: 100%"
  >
    <el-table-column type="index" label="序号" width="50"></el-table-column>
    <el-table-column property="reportName" label="报告名称"></el-table-column>
    <el-table-column property="compileName" label="编写人"></el-table-column>
    <el-table-column property="createTime" label="编写时间"></el-table-column>
    <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
      <template #default="scope">
        <el-button icon="Search" link type="primary" @click="getTableData(scope.row)">查看详情</el-button>
        <el-button icon="Delete" link type="primary" @click="delTableData(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-button type="primary" style="margin:10px 0" @click="openWord">生成报告</el-button>
  <el-dialog v-model="initData.openWordOpen"  width="1200" :min-height="800">
    <el-line title="工作报告" style="margin:10px 0 10px 0"></el-line>
    <div style="margin: 0px 10px 10px 0px;text-align:right">
      <el-button style="width: 80px" type="warning" @click="print">打印</el-button>
      <el-button style="width: 80px" @click="downloadAsWord"  type="success">下载</el-button>
      <el-button v-show="initData.isAdd" style="width: 80px" type="primary" @click="saveWorkReportM">归档</el-button>
    </div>
    <editor v-if="initData.isAdd" v-model="initData.form.content" :min-height="400"/>
    <editor v-else :read-only="!initData.isAdd" v-model="initData.form.content" :min-height="400"/>
  </el-dialog>
  <div style="display: none" v-html="initData.form.content" id="printMe"></div>
  </template>

<script setup>
import exportWord from 'html-doc-js'
import { defineProps, defineEmits } from 'vue';
import {workReportHtmlPrint} from "../../../utils/ruoyi.js";
import {reactive,ref} from 'vue';
import {saveWorkReport,delWorkReportInfo,getWorkReportInfo} from "../../../api/matter/matter";
const reportName = ref(null);
const {proxy} = getCurrentInstance();
const props = defineProps({
  parentData:Object,
  getMatterM:Object
})
const emit = defineEmits()


const initData = reactive({
  wordContent:null,
  isAdd: true,
  form:{},
  workReportTableData: [],
  openWordOpen:false,
  workData:{},
});

const styleData = reactive({
  'class="ql-align-center': 'style="text-align: center;',
  'ql-size-large': 'font-size: 1.5em;',
  'ql-indent-1': 'counter-increment: list-1;',
});

function downloadAsWord() {
  const wrap = document.getElementById('printMe');
  for (let key in styleData) {
    if (styleData.hasOwnProperty(key)) { // 替换class 为内联样式
      wrap.innerHTML = wrap.innerHTML.replaceAll(key, styleData[key]);
    }
  }
  const config = {
    document: document, //默认当前文档的document 导出内容是iframe内部时需要使用iframe的document（getElementById('#iframe').contentDocument），注意iframe同域
    addStyle: true, // 是否导出样式，默认为true，此操作会将所有样式转换成行内样式导出
    fileName: '工作报告', // 导出文件名（不需要后缀） 存在文件名则会直接下载 否则会仅在success中返回blob
    toImg: ["canvas", "mjx-math"], // 页面哪些部分需要转化成图片，例如echart图表之类
    success(blob, dom) {
    } // 完成之后回调， blob及完整处理后dom
  }
  exportWord(wrap,config)
}
function print(){
  workReportHtmlPrint('printMe');
}

function saveWorkReportM(){
  let reportName= document.getElementById('reportName').innerText;// 报告名称
  let content = initData.form.content;
  let matterId = props.parentData.matterId;
  let workReport={
    reportName,content,matterId
  }
  saveWorkReport(workReport).then(response => {
    if (response.code === 200) {
      proxy.$modal.msgSuccess('操作成功');
      getMatterM();
      initData.openWordOpen = false;
    }
  })



}

function tableRowClassName({row, rowIndex}) {
  row.index = rowIndex;
}
function getTableData(row){
  console.log(proxy.$refs['editor'])
  initData.isAdd = false;
  getWorkReportInfo(row.sid).then(res=>{
    initData.form.content = res.data.content;
    initData.openWordOpen = true;
  })
}
function delTableData(row){
  proxy.$modal.confirm('确定删除?').then(function() {
    delWorkReportInfo(row.sid).then((response) => {
      if (response.code === 200) {
        proxy.$modal.msgSuccess("删除成功");
        getMatterM();
      }
  })
  })
}

function openWord(){
  initData.isAdd = true;
  if (JSON.stringify(props.parentData) === '{}'){
    proxy.$modal.msgWarning("请选择要生成报告的事项");
    return;
  }
  getMatterM().then(response=>{
    let matterName = props.parentData.matterName;
    let createTime = props.parentData.createTime;
    let contentCount = 0;
    let defVal = "      ";
    // 工作内容
    let contentNames = defVal;
    // 协同人
    let collaboratorsName = defVal;
    // 协同内容
    let collaborationNeed = defVal;
    // 催办人
    let dialogUserName = defVal;
    // 催办时间
    let dialogUserTime = defVal;
    // 催办意见
    let dialogContent = defVal;
    // 已落实记录
    let workPrtKeyNode1 = "";
    // 未落实记录
    let workPrtKeyNode2 = "";
    // 计划完成时间
    let completionDeadline = defVal;
    if (props.parentData.completionDeadline){
      completionDeadline = props.parentData.completionDeadline;
    }
    if (props.parentData.workContentList.length > 0) {
      contentCount = props.parentData.workContentList.length;
      contentNames = props.parentData.workContentList.map(item => item.workContentDescription).join(',');
    }
    if (props.parentData.workCollaborationList.length>0){
      collaboratorsName = props.parentData.workCollaborationList.map(item => item.collaboratorsName).join(',');
      collaborationNeed = props.parentData.workCollaborationList.map(item => item.collaborationNeed).join(',');
    }

    if (props.parentData.workDialogList.length>0){
      dialogUserName = props.parentData.workDialogList.map(item => item.dialogUserName).join(',');
      dialogUserTime = props.parentData.workDialogList.map(item => item.createTime).join(',');
      dialogContent = props.parentData.workDialogList.map(item => item.dialogContent).join(',');
    }

    if (props.parentData.workMatterPracticableList.length>0){
      let workMatterPracticableList1 = props.parentData.workMatterPracticableList.filter(item => item.workPrtIsComlt == 1);// 完成
      let workMatterPracticableList2 = props.parentData.workMatterPracticableList.filter(item => item.workPrtIsComlt == 0);// 为完成
      if (workMatterPracticableList1.length>0){workPrtKeyNode1=workMatterPracticableList1.map(item=>item.workPrtKeyNode).join(',')}
      if (workMatterPracticableList2.length>0){workPrtKeyNode2=workMatterPracticableList2.map(item=>item.workPrtKeyNode).join(',')}
    }

    initData.form.content = `<p class="ql-align-center">
<br></p><p class="ql-align-center"><br></p><h3 class="ql-align-center"> <strong id="reportName" class="ql-size-large">关于《${matterName}》的工作报告</strong></h3><p class="ql-align-center"><br></p><p class="ql-align-center">&nbsp;</p><p class="ql-indent-1"><span class="ql-size-large">              </span>\t<span class="ql-size-large">${matterName}于${createTime}开始，共有${contentCount}项工作内容，分别为:${contentNames}。</span></p><p><span class="ql-size-large">                        </span></p><p><span class="ql-size-large">                         由${collaboratorsName}协助完成${collaborationNeed}。</span></p><p class="ql-indent-1"><br></p><p class="ql-indent-1">&nbsp;                          <span class="ql-size-large">期间${dialogUserName}于${dialogUserTime}督办此事项，要求${dialogContent}。</span></p><p><br></p><p><span class="ql-size-large">                         目前已完成工作：</span></p><p><br></p><p><br></p><p><span class="ql-size-large">                                    落实记录：${workPrtKeyNode1}</span></p><p><br></p><p>&nbsp;</p><p><span class="ql-size-large">                                 未完成工作：</span></p><p><br></p><p>&nbsp;</p><p><span class="ql-size-large">                                    落实记录：${workPrtKeyNode2}</span></p><p><br></p><p>&nbsp;</p><p><span class="ql-size-large">                         计划于${completionDeadline}完成全部工作内容，并结项。</span></p><p><br></p><p>&nbsp;</p>`
    initData.openWordOpen = true;
  })
}

// 调用父组件getMatterM方法重新获取数据
function getMatterM (){
  return props.getMatterM(props.parentData.matterId);
}
function created(){

}


created();
</script>

<style scoped lang="scss">

</style>

